<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style=" border:1px solid #ccc;display: block; margin: 50px auto;"></canvas>
	</body>
	<script>
		var ball = {x:512,y:100,r:20,g:2,vx:-4,vy:0,color:'#005588'};
		window.onload = function (){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			
			canvas.width =1024;
			canvas.height =768;
			
			setInterval(function(){
				render(context);
				update();
				
			},50);//匿名函数内 执行的速率不同 不一定能1s24帧做好动画
		}
		function update() {
			ball.x +=ball.vx; //速度和位移
			ball.y +=ball.vy;
			ball.vy +=ball.g;
			
			if(ball.y>= 768-ball.r){
				ball.y = 768-ball.r;
				ball.vy = -ball.vy*0.5;
				console.log(1);
			}
		}
		
		function render (cxt) {
			//cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
			
			cxt.fillStyle = ball.color; //颜色可以写个数组 然后随机读取
			cxt.beginPath();
			cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
			cxt.closePath();
			cxt.fill();
		}
	</script>
</html>
